<template>
  <div>

    <SkyCardPanel title="上传列表">
      <div slot="main">
        <SkyUpLoad multiple :file-list="fileList" :on-preview="previewhook" :before-remove="beforeremovehook" :on-remove="removehook" :on-change="handleChange" :http-request="submitUpload">
          <SkyButton type="secondary">上传</SkyButton>
        </SkyUpLoad>
      </div>
    </SkyCardPanel>

    <SkyCardPanel title="附件组上传">
      <div slot="main">
        <SkyUpLoad multiple UpModel="group" :file-list="fileList" :on-preview="previewhook" :before-remove="beforeremovehook" :on-remove="removehook" :on-change="handleChange" :http-request="submitUpload"></SkyUpLoad>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
            //上传列表
              
            &lt;SkyUpLoad 
              multiple 
              :file-list="fileList" 
              :on-preview="previewhook" 
              :before-remove="beforeremovehook"
              :on-remove="removehook" 
              :on-change="handleChange"
              :http-request="submitUpload"
            &gt;
              &lt;SkyButton type="secondary"&gt;上传&lt;/SkyButton&gt;
            &lt;/SkyUpLoad&gt;


            //附件组上传
              
            &lt;SkyUpLoad 
               multiple 
               UpModel="group" 
              :file-list="fileList" 
              :on-preview="previewhook" 
              :before-remove="beforeremovehook"
              :on-remove="removehook" 
              :on-change="handleChange"
              :http-request="submitUpload"
            &gt;
            &lt;/SkyUpLoad&gt;

            
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
            上传列表
              
            export default {
              data () {
                return {
                  fileList: [
                    {
                       name: '维多利亚的秘密',
                       url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595558691193&di=00fa6be912fbf7c28e761a855f8792ed&imgtype=0&src=http%3A%2F%2Fc4.haibao.cn%2Fimg%2F600_695_100_2%2FliPAdUBQJUcf6%2Fpiccommon%2F1210%2F12104%2FliPAdUBQJUcf6.jpg'
                    }
                  ]
                }
              },
              methods: {
                //文件状态改变时的钩子
                handleChange (file, fileList) {
                  console.log(file, fileList)
                },
                //文件上传时的钩子
                submitUpload (file, fileList) {
                  console.log('上传文件', file)
                },
                //上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
                beforeremovehook (file, fileList) {
                  console.log('准备删除', file, fileList)
                  return true   // 返回false阻止删除  true允许删除
                },
                //文件列表移除文件时的钩子
                removehook (file, fileList) {
                  console.log('删除成功', file, fileList)
                },
                //点击文件列表中已上传的文件时的钩子
                previewhook (file) {
                  console.log(file)
                }
              }
            }
          </code>
      </pre>
      </div>

    </SkyHiddenPanel>

  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [
        { name: '维多利亚的秘密', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595558691193&di=00fa6be912fbf7c28e761a855f8792ed&imgtype=0&src=http%3A%2F%2Fc4.haibao.cn%2Fimg%2F600_695_100_2%2FliPAdUBQJUcf6%2Fpiccommon%2F1210%2F12104%2FliPAdUBQJUcf6.jpg' }
      ]
    }
  },
  methods: {
    //文件状态改变时的钩子
    handleChange (file, fileList) {
      console.log(file)
    },
    //文件上传时的钩子
    submitUpload (file, fileList) {
      console.log('上传文件', file)
    },
    //上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
    beforeremovehook (file, fileList) {
      console.log('准备删除', file)
      return true   // 返回false阻止删除  true允许删除
    },
    //文件列表移除文件时的钩子
    removehook (file, fileList) {
      console.log('删除成功', file)
    },
    //点击文件列表中已上传的文件时的钩子
    previewhook (file) {
      console.log(file)
    }
  }
}
</script>

<style>
</style>